<template>
    <el-dialog
        title="新建"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="800px"
    >
        <div v-if="reset" v-loading="loadingGet">
            <el-form :model="formData" :rules="rules" ref="form" v-if="parent">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上级部门：" prop="parentId" label-width="160px">
                            <el-input v-model="parentName" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="名称：" prop="abbreviation" label-width="160px">
                            <el-input v-model="formData.abbreviation"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="全称：" prop="name" label-width="160px">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="组织后缀：" prop="suffix" label-width="160px">
                            <el-input v-model="formData.suffix"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态：" prop="state" label-width="160px">
                            <el-radio-group v-model="formData.state">
                                <el-radio :label="1">正常</el-radio>
                                <el-radio :label="2">废弃</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="组织类型：" prop="type" label-width="160px">
                            <el-select v-model="formData.type" style="width:100%;">
                                <template v-if="parent.type===1">
                                    <el-option label="区域" :value="1"></el-option>
                                    <el-option label="单位" :value="2"></el-option>
                                    <el-option label="乡镇街道" :value="3"></el-option>
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===2">
                                    <el-option label="部门/科室" :value="6"></el-option>
                                    <el-option label="下属单位" :value="7"></el-option>
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===3">
                                    <el-option label="部门/科室" :value="6"></el-option>
                                    <el-option label="村、社区" :value="5"></el-option>
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===4">
                                    <el-option label="区域" :value="1"></el-option>
                                    <el-option label="单位" :value="2"></el-option>
                                    <el-option label="乡镇街道" :value="3"></el-option>
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===5">
                                    <el-option label="网格单元" :value="9"></el-option>
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===6">
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===7">
                                    <el-option label="部门/科室" :value="6"></el-option>
                                    <el-option label="下属单位" :value="7"></el-option>
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===8">
                                    <el-option label="虚拟组织" :value="8"></el-option>
                                </template>
                                <template v-else-if="parent.type===9"></template>
                                <template v-else>
                                    <el-option label="区域" :value="1"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="行政级别：" prop="clazz" label-width="160px">
                            <el-select v-model="formData.clazz" style="width:100%;">
                                <el-option label="省级" :value="3"></el-option>
                                <el-option label="市级" :value="4"></el-option>
                                <el-option label="县级" :value="5"></el-option>
                                <el-option label="乡镇街道" :value="6"></el-option>
                                <el-option label="村、社区" :value="7"></el-option>
                                <el-option label="网格" :value="8"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="组织唯一编码：" prop="code" label-width="160px">
                            <el-input v-model="formData.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="统一社会信用代码：" prop="uniscid" label-width="160px">
                            <el-input v-model="formData.uniscid"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="排序：" label-width="160px">
                            <el-input v-model="formData.sort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"></el-col>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import dept_api from '../../api/dept_api'

export default {
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
        parent: Object,
    },
    created() {
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        }
    },
    data() {
        return {
            reset: true,
            parentName: '',
            loadingGet: false,
            loadingSubmit: false,
            formData: {
                state: 1,
            },
            rules: {
                name: [
                    { required: true, message: '请输入全称', trigger: 'blur' }
                ],
                abbreviation: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                suffix: [
                    { required: true, message: '请输入组织后缀', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择组织类型', trigger: 'change' }
                ],
                clazz: [
                    { required: true, message: '请选择行政级别', trigger: 'change' }
                ],
                code: [
                    { required: true, message: '请输入组织唯一编码', trigger: 'blur' }
                ],
                uniscid: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
                ],
                state: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
            },
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    this.formData.parentId = this.parent.id
                    dept_api.add(this.formData).then(data => {
                        this.loadingSubmit = false
                        this.$message.success('保存成功!')
                        this.success(data)
                    }).catch(err => {
                        this.loadingSubmit = false
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleCancel() {
            this.cancel()
        },
        init() {
            this.parentName = this.parent.abbreviation + ' [' + this.parent.code + ']'
        }
    }
}
</script>

<style scoped>
</style>
